<template>
	<view>
		<u-icon name="play-right-fill" color="#fff" v-show="!isPlay" size="22" @click="play(true)"></u-icon>
		<u-icon name="pause-circle-fill" color="#fff" v-show="isPlay" size="22" @click="play(false)"></u-icon>
	</view>
</template>
<script>
	export default {
		name: '',
		props: {
			data: {
				type: Array,
				default: () => []
			}
		},
		components: {},
		data() {
			return {
				isPlay: false,
				playIndex: 0
			}
		},
		methods: {
			play(isPlay) {
				this.isPlay = isPlay
				console.info(`isPlay:`, isPlay)
				if (!isPlay) {
					if (this.playTimer) {
						clearInterval(this.playTimer)
					}
					return
				}

				this.playTimer = setInterval(() => {
					this.playIndex++
					if (this.playIndex > this.data.length - 1) {
						this.playIndex = 0
					}
					this.stepsCK()
				}, 1200)
			},
			stepsCK() {
				this.$emit('change', this.playIndex)
			}
		},
		computed: {},
		beforeDestroy() {
			clearInterval(this.playTimer)
		},
		mounted() {}
	}
</script>
<style lang="less" scoped></style>
